<template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '发布真实的评价' " left-arrow @click-left="onClickLeft"
            id="navBar"></van-nav-bar>
        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">
            <view class="pageTop">
                <view class="title"> 发布评价 </view>
                <!-- <view class="subtitle">{{subtitle}}</view> -->
            </view>
            <form @submit.prevent="formSubmit" catchreset="formReset">
                <view class="pageMiddle">
                    <view v-for="(item,index) in  goodsList" :key="index"  @click="setCurrentGoods(item.orderDetailId)">
                        <view class="goodsDetail">
                            <view class="goodsPic"> <img :src="item.imgUrl" mode="widthFix" alt=""> </view>
                            <view class="goodsText">
                                <!-- <view class="goodsTop"> 发表您对产品的评价</view>
                                <view class="goodsSpecs"> 购买商品规格</view> -->
                                <view class="goodsTop">
                                    <view class="goods_T">{{ item.productName }}</view>
                                    <view class="goods_price">X {{ item.buyNum }}</view>
                                </view>
                                <view class="googsMiddle">
                                    <view class="goods_specs">{{ item.specName }}</view>
                                </view>
                                <view class="goodsBottom">
                                    <view class="money" v-if="item.productPrice && item.productPrice !==0">￥{{ item.productPrice }}</view>
                                    <view class="jifen_box" v-if="item.maxUsefulPoints && item.maxUsefulPoints!=='0'">
                                        <view class="money">最多可用</view>
                                        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/jinbi.png"
                                            alt=""
                                            style="height: 22rpx; width: 22rpx; margin-right: 6px;margin-left: 6px;" />
                                        {{ item.maxUsefulPoints }}
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="overallEvaluation">
                            <view class="text r20 " style="color: #111111;font-size: 28rpx; line-height: 28rpx;"> 商品评价
                            </view>
                            <!-- <view class="icon">
                            <img :src="isSelectedBad ? actBadIcon : inactBadIcon" alt="" @tap="select(0)" style="width: 12px; height: 12px;">
                            <img :src="isSelectedMid ? actMiddleIcon : inactMiddleIcon" alt="" @tap="select(1)" style="width: 12px; height: 12px;">
                            <img :src="isSelectedBest ? actBestIcon : inactBestIcon" alt="" @tap="select(2)" style="width: 12px; height: 12px;">
                            </view> -->
                            <view class="icon">
                                <van-rate :value="item.comment.rating" size="20" color="#FF6203" void-icon="star"
                                    void-color="#eee" @change="onChangeRate" />
                            </view>
                        </view>
                        <view class="judgeTips">
                            <view>
                                <textarea placeholder="发布您的评价，对我们非常重要哦~" :value="item.comment.message"
                                    placeholder-style="font-size: 12px;color: #888888;" :disable-default-padding="true"
                                    @input="handleInput" auto-focus="true" confirm-type="done" maxlength="200"
                                    autoHeight
                                    custom-style="font-size: 12px;line-height:1.5; color:#111111;"></textarea>
                            </view>
                        </view>
                        <view class="uploadPic">
                            <!-- 图片预览列表 -->
                            <view class="preview-list">
                                <view v-for="(file, fIndex) in item.comment.files" :key="fIndex" class="preview-item">
                                    <image :src="file.url" class="preview-image" @click="previewImage(fIndex)"> </image>
                                    <view class="delete-icon" @click="deleteImage(fIndex)">×</view>
                                </view>
                            </view>
                                <!-- 上传按钮 -->
                                <view class="upload-btn" @click.stop="handleUploadClick(item.orderDetailId)">
                                <image class="upload-icon"
                                    src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/uploaderPic.png"
                                    mode="aspectFit"></image>
                                <text class="upload-text">点击上传图片（最多九张）</text>
                            </view>
                        </view>
                    </view>

                    <view class="niming">
                        <van-checkbox :value="isAnonymous" @change="onChange" checked-color="#FF6203">匿名评价</van-checkbox>
                    </view>
                </view>

            </form>
            <view class="bottom">
                <!-- <button plain type="waring" @tap="submitComment" class="button">确认评价</button> -->
                <van-button type="primary" class="button" @click="submitComment" :disabled="isSubmitting"
                :class="{ 'disabled-btn': isSubmitting }">确认评价</van-button>
            </view>
        </scroll-view>
    </view>
</template>
<script>
import CryptoJS from 'crypto-js'; // 确保已正确导入 CryptoJS
import {submitCommentApi} from '@/api/judge'
export default {

    components: {
    },
    data () {
        return {
            navBarTitle: '发布真实的评价',
            scrolling: false,
            subtitle:'商品评价',
            showJudgePopup:false,
            fileList: [],
            fileUrl: "",
            show: false,
            sysFileId: null,
            isAnonymous:true,
            checked:false,
            message:'哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈哈hhhhh哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈哈',
            inactBadIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/bad.png',
            actBadIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/bad_act.png',
            inactMiddleIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/middle.png',
            actMiddleIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/middle_act.png',
            inactBestIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/best.png',
            actBestIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/best_act.png',
            isSelectedBad:false,
            isSelectedMid:false,
            isSelectedBest:false,
            valueStar:5,
            goodsList:[
            {
                orderDetailId: 11,
                    imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                    title: '黄芪杞姜枣糕红枣',
                    price: '15',
                    num: '1',
                    score: 190,
                    money: '120',
                    specs: '口味一：五斤装',
                    isShouQing: false,
                    isXiajia: false
                },
                // {
                //     orderDetailId: 12,
                //     imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //     title: '黄芪杞姜枣糕红枣枸杞 口味一：五斤装',
                //     price: '16',
                //     num: '1',
                //     score: 190,
                //     money: '120',
                //     specs: '口味一：五斤装',
                //     isShouQing: false,
                //     isXiajia: false
                // },
            ],
            fileList: [], // 图片列表
            currentGoodsId: null, // 新增当前操作的商品ID
            params:{},
            orderType:null,
            isSubmitting: false,  // 防抖状态
        }

    },

    computed: {},

    watch: {},
    onLoad (data) {
        if(data && data.params){
            this.params = JSON.parse(decodeURIComponent(data.params))
            console.log(this.params,'params')
            this.goodsList = this.params.productInfoList;
            this.orderType = this.params.orderType
        }
    },
    onReady () {
        // this.goodsList.forEach(ele=>{
        //     this.$set(ele,'flag',false)
        // })
    },

    methods: {
        // 滑动
        scrollPage (e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft () {
            uni.navigateBack()
        },

        // 显示弹窗
        sendJudge(){
            console.log('---')
            this.showJudgePopup=true
        },
        // 关闭弹窗
        closeJudgePopup(){
            this.showJudgePopup=false
        },
         // 新增上传按钮处理方法
        handleUploadClick(goodsId) {
            this.setCurrentGoods(goodsId);
            this.chooseImage();
        },
        // 切换当前操作的商品
        setCurrentGoods(id) {
            this.currentGoodsId = id;
            // 初始化评论对象（如果不存在）
            if (!this.goodsList.find(g => g.orderDetailId === id).comment) {
                this.$set(this.goodsList.find(g => g.orderDetailId === id), 'comment', {
                    rating: 0,
                    message: '',
                    files: [],
                    commentType: '差评',
                    isAnonymous: this.isAnonymous ? 1:0, //// 是否匿名 0：否 1：是 
                });
            }
        },

        handleInput(e) {
            console.log('输入框输入的内容是：', e.detail.value);
            const goods = this.goodsList.find(g => g.orderDetailId === this.currentGoodsId);
            if (goods) {
                if (e.detail.value.length > 200) {
                    wx.showToast({
                        title: '超出字数限制',
                        icon: 'none'
                    });
                    return;
                }
                goods.comment.message = e.detail.value;
            }
            // const value=e.detail.value
            // if (value.length > 200) {
            //     wx.showToast({
            //         title: '超出字数限制',
            //         icon: 'none'
            //     });
            //     return;
            // }
            // this.message= e.detail.value
        },

        // 单选框
        radioChange (e) {
            console.log('radio发生change事件，携带value值为：', e.detail.value)
            this.checked=!this.checked
        },
     
        onChange(e){
            console.log(e.detail)
            this.isAnonymous = !this.isAnonymous
        },

        // 上传图片  临时的url
        // async chooseImage() {
        //     const goods = this.goodsList.find(g => g.Id === this.currentGoodsId);
        //     if (!goods) return;
        //     try {
        //         const res = await uni.chooseImage({
        //             count: 9 - goods.comment.files.length, // 最多可以选择的图片数量
        //             sizeType: ['compressed'],
        //             sourceType: ['album', 'camera'],
        //             success: (res) => {
        //                 console.log('选择图片成功:', res.tempFiles);
        //                 console.log('选择图片成功，临时路径:', res.tempFilePaths);
        //                 // uni.showLoading({ title: '上传中...' });
        //                 // 直接使用临时路径，不上传OSS
        //                 const newFiles = res.tempFilePaths.map(url => ({
        //                     url,
        //                     status: 'done',
        //                     isImage: true
        //                 }));
        //                  // 方式一：使用临时路径哈希去重（精确匹配）
        //                 const urlSet = new Set(goods.comment.files.map(f => f.url));
        //                 const uniqueFiles = newFiles.filter(f => !urlSet.has(f.url));
        //                 // 合并并限制最大数量
        //                 goods.comment.files = [
        //                     ...goods.comment.files,
        //                     ...uniqueFiles
        //                 ].slice(0, 9);

        //                 // Vue响应式更新
        //                 this.$set(goods, 'comment', { ...goods.comment });
        //             }
        //         });
        //     } catch (error) {
        //         uni.showToast({
        //             title: error.errMsg || '选择图片失败',
        //             icon: 'none'
        //         });
        //         uni.hideLoading();
        //     }
        // },
        // 上传图片
        async chooseImage() {
            const goods = this.goodsList.find(g => g.orderDetailId === this.currentGoodsId);
            if (!goods) return;

            try {
                // 1. 选择图片
                const res = await uni.chooseImage({
                    count: 9 - goods.comment.files.length,
                    sizeType: ['compressed'],
                    sourceType: ['album', 'camera']
                });

                // 2. 显示上传状态
                uni.showLoading({ title: '上传中...', mask: true });

                // 3. 并行上传所有图片
                const uploadTasks = res.tempFilePaths.map(async (tempPath) => {
                    try {
                        const ossUrl = await this.uploadToOSS(tempPath);
                        return {
                            url: ossUrl,
                            status: 'done',
                            isImage: true
                        };
                    } catch (error) {
                        console.error('上传失败:', error);
                        return {
                            url: tempPath,
                            status: 'error',
                            isImage: true
                        };
                    }
                });

                // 4. 等待所有上传任务完成
                const newFiles = await Promise.all(uploadTasks);

                // 5. 过滤掉上传失败的文件
                const validFiles = newFiles.filter(f => f.status === 'done');

                // 6. 合并文件列表（使用Vue响应式更新）
                goods.comment.files = [
                    ...goods.comment.files,
                    ...validFiles
                ].slice(0, 9);

                this.$set(goods, 'comment', { ...goods.comment });
                console.log('上传完成，更新后文件列表:', goods.comment)
            } catch (error) {
                uni.showToast({
                    title: error.errMsg || '操作失败',
                    icon: 'none'
                });
            } finally {
                uni.hideLoading();
            }
        },

        // 阿里云OSS上传方法 (需要补充OSS配置)
        async uploadToOSS(filePath) {
            // 这里需要实现具体的OSS上传逻辑，示例：
            const OSS_CONFIG = {
                region: 'oss-cn-beijing',
                accessKeyId: 'LTAI5t977yzTgy3KuHsZpNGp',
                accessKeySecret: '3XClQa1PDAqqHyK1avhz5npkhN7Uel',
                bucket: '17lelife-bucket',
                host: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/',
                dir: 'WeChat-App-Picture/comment/images/'
            };
            try {
            // 生成唯一文件名
            const fileName = `${Date.now()}_${Math.random()
                .toString(36)
                .substr(2, 12)}${filePath.substr(filePath.lastIndexOf('.'))}`;
            
            const fullPath = `${OSS_CONFIG.dir}${fileName}`;

            // 生成安全策略
            const policyText = {
                expiration: new Date(Date.now() + 3600000).toISOString(),
                conditions: [
                    ["content-length-range", 0, 10485760], // 10MB限制
                    ["starts-with", "$key", OSS_CONFIG.dir]
                ]
            };

            const policy = CryptoJS.enc.Base64.stringify(
                CryptoJS.enc.Utf8.parse(JSON.stringify(policyText))
            );

            // 生成签名
            const signature = CryptoJS.HmacSHA1(policy, OSS_CONFIG.accessKeySecret)
                .toString(CryptoJS.enc.Base64);

            // 执行上传
            const uploadRes = await uni.uploadFile({
                url: OSS_CONFIG.host,
                filePath: filePath,
                name: 'file',
                formData: {
                    key: fullPath,
                    policy: policy,
                    OSSAccessKeyId: OSS_CONFIG.accessKeyId,
                    signature: signature,
                    success_action_status: '200'
                }
            });

            if (uploadRes.statusCode !== 200) {
                throw new Error('上传失败');
            }

            return `${OSS_CONFIG.host}${fullPath}`;
        } catch (error) {
            console.error('OSS上传失败:', error);
            throw new Error(`文件上传失败：${error.message}`);
        }
            // const uploadTask = await uni.uploadFile({
            //     url: `https://${ossConfig.bucket}.${ossConfig.region}.aliyuncs.com`,
            //     filePath,
            //     name: 'file',
            //     formData: {
            //         key: `uploads/${Date.now()}_${Math.random().toString(36).substr(2)}`,
            //         policy: '...',       // 需要从服务端获取
            //         OSSAccessKeyId: ossConfig.accessKeyId,
            //         signature: '...',    // 需要从服务端获取
            //         success_action_status: '200'
            //     }
            // });

            // if (uploadTask.statusCode !== 200) {
            //     throw new Error('上传失败');
            // }

            // return `https://${ossConfig.bucket}.${ossConfig.region}.aliyuncs.com/${uploadTask.data.key}`;
        },


        async submitComment(event) {//点击提交按钮上传设置banner图数据
            // debugger
            console.log(event.detail.value)
            // 如果正在提交，直接返回
            if (this.isSubmitting) return;
            // 标记为正在提交
            this.isSubmitting = true;
            try {
                const hasInvalidRating = this.goodsList.some(goods => {
                    return !goods.comment?.rating || Number(goods.comment.rating) <= 0
                });

                if (hasInvalidRating) {
                    uni.showToast({
                        title: '请为所有商品评分后再提交',
                        icon: 'none',
                        duration: 3000
                    });
                    return;
                }
                const apiParams = this.goodsList.map(goods => ({
                    sourceId: this.params.orderId,       // 需要确认订单ID字段来源
                    sourceDetailId: goods.orderDetailId, // 需要确认订单详情ID字段来源
                    target1Id: goods.productId,         // 使用商品ID作为productId
                    target1Value1: goods.productName,    // 使用商品名称作为productName
                    target1Value2: goods.imgUrl,       // 使用商品图片作为imgUrl
                    target2Id: goods.productAttrValueId,            // 使用属性Id
                    target2Value1: goods.specName,       // 商品规格名称
                    rating: goods.comment.rating,
                    content: goods.comment.message,
                    commentType: this.orderType == 0 ? 'product' : 'service', // 根据评分获取评价类型
                    isAnonymous: this.isAnonymous ? 1 : 0,
                    commentImgUrls: goods.comment.files.map(file => file.url)
                }));
                console.log(apiParams,'apiParams')
                const res = await submitCommentApi(apiParams);
                if (res.code == 200) {
                    uni.showToast({
                        title: '评价提交成功',
                        icon: 'success'
                    });
                }
                // 2秒后返回上一页
                setTimeout(() => {
                    uni.navigateBack();
                }, 2000);

            } catch (error) {
                console.error('提交评价失败:', error);
                uni.showToast({
                    title: '提交评价失败，请稍后重试',
                    icon: 'none',
                });
            } finally {
                // 无论成功或失败，都重置提交状态
                this.isSubmitting = false;
                // 2 秒后返回上一页
                setTimeout(() => {
                    uni.navigateBack();
                }, 2000);
            }
        },

        // 新增评价类型判断方法
        getCommentType(rating) {
            if (rating >= 4) return '好评'
            if (rating >= 2) return '中评'
            return '差评'
        },

        // 
        select(val){
            if(val===0){
                this.isSelectedBad=!this.isSelectedBad
                this.isSelectedMid=false
                this.isSelectedBest=false
            }else if(val===1){
                this.isSelectedBad=false
                this.isSelectedMid=! this.isSelectedMid
                this.isSelectedBest=false
            }else{
                this.isSelectedBad=false
                this.isSelectedMid=false
                this.isSelectedBest=!this.isSelectedBest
            }
        },
        // 星级评分
        onChangeRate(e){
            console.log(e,'pingfen ')
            const goods = this.goodsList.find(g => g.orderDetailId === this.currentGoodsId);
            if (goods) {
                goods.comment.rating = e.detail;
            }
            // this.valueStar=e.detail
        },

        // 删除图片方法需要补充（原代码中未实现）
        deleteImage(index) {
            const goods = this.goodsList.find(g => g.orderDetailId === this.currentGoodsId);
            if (goods) {
                goods.comment.files.splice(index, 1);
            }
        }


    }

}
</script>
<style lang="scss" scoped>

.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    overflow:hidden;
    box-sizing: border-box;
    height:100vh;
}
.scroll-content {
    flex: 1;
    height: 1px;
}

.pageTop{
    margin: 0px 24px;
    padding-top: 17px;

    .title{
        font-size: 60rpx;
        color: #111111;
        text-align: left;
        line-height: 60rpx;
    }

    .subtitle{
        padding-top: 24px;
        text-align: left;
        font-size: 28rpx;
        line-height: 28rpx;
        color: #111111;
        
    }



}


.pageMiddle{
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 160rpx;
}
.goodsDetail{
    margin-top: 24px;
    padding: 12px;
    border-radius:4px;
    background: #f9f9f9;
    display: flex;

    .goodsPic{
        width: 20%;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        img{
            width: 100%;
            height: auto;
            border-radius: 4px;
        }
    }
    .goodsText{
        padding-left: 24rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width:calc(80% - 24rpx);
    }

    .goodsTop {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .goods_T {
          font-size: 28rpx;
          text-align: left;
          color: #111111;
          max-width: 80%;
          line-height: 28rpx;
          // margin-top: 9px;  //display：flex   中 元素居中
          white-space: nowrap;
          /* 防止文本换行 */
          overflow: hidden;
          /* 超出部分隐藏 */
          text-overflow: ellipsis;
          /* 显示省略号 */

        }

        // 商品价格
        .goods_price {
          font-size: 28rpx;
          color: #111111;
          line-height:28rpx;
        }
      }

      .googsMiddle {
        // position: absolute;
        // top: 25%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 24rpx;
        color: #666666;

        .goods_specs {
          // margin-top: 7px;
          max-width: 80%;
          font-size: 24rpx;
          text-align: left;
          color: #666666;
          //   line-height: 11px;

          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
        }

        // .goods_num {
        //   font-size: 22rpx;
        //   line-height: 22rpx;
        //   color: #666666;
        // }

      }
    .goodsBottom{
      display: flex;
      align-items: center;
      width:100%;

    .money{
      font-size: 28rpx;
      text-align: left;
      color: #111111;
      line-height: 28rpx;
    }
    .jifen_box{
        display: flex;
        align-items: center;
        // color: #111111;
        margin-left: 6px;
        font-weight: bolder;
        font-size: 28rpx;
        text-align: left;
        color: #111111;
        line-height: 28rpx;
        height: 28rpx;
    }
  }
}
.judgeTips{
    padding: 48rpx 0rpx 14rpx 0rpx;
    font-size: 24rpx;
    text-align: left;
    color: #888888;
    border-bottom: 1px solid #f9f9f9;
}
.uploadPic{
    margin-top:36rpx;
    // display: flex;
 
}
.uploader{
    background-color: #f9f9f9;
    padding: 24px 12px;
    border-radius: 25px;
    border:1px dashed #f9f9f9;
}
.text{
    font-size: 24rpx;
    color: #888888;
    line-height: 24rpx;
}

.overallEvaluation{
    margin-top: 24px;
    display: flex;
    align-items: center;
}
.icon{
    display: flex;
}
.icon img{
    margin-right: 25px;
}

.niming{
    display: flex;
    margin-top: 12px;
}
.radioBox{
    display: flex;
    align-items: center;
}

// 上传图片
.custom-uploader {
    padding: 15px;
}

.upload-btn {
    width: 174rpx;
    height: 174rpx;
    border: 1px dashed #ddd;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    background-color: #f0f0f0;
}

.upload-icon {
    width: 40rpx;
    height: 34rpx;
}

.upload-text {
    font-size: 24rpx;
    color: #888888;
    margin-top: 8px;
    text-align: center;
}

.preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.preview-item {
    position: relative;
    // width: calc((100% - 20rpx)/3);
    // height:174rpx;
    width: 174rpx;
    height:174rpx;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20rpx;
    // margin-right: 10rpx;
    margin-right: 28rpx;
    &:nth-child(3n) {
        margin-right: 0;
    }
}

.preview-image {
    width: 100%;
    height: 100%;
}

.delete-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    background: rgba(0,0,0,0.5);
    color: white;
    text-align: center;
    line-height: 24px;
    border-radius: 0 0 0 8px;
}

::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep #navBar .van-icon {
    color: #242629 !important;
}

::v-deep .van-icon-arrow{
    color:#FF6203 !important ;
}

:v-deep .van-uploader{
    border-radius: 4px !important;
}

.r20{
    margin-right: 20px;
}
.l6{
    margin-left: 6px;
}
.btn-area{
    position: fixed;
    bottom: 0;
    width: calc(100% - 48px);
    padding-left: 24px !important;
    display: flex;
    background: #ffffff;
    z-index: 100;
    height: 144rpx;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-top: 1px solid #f9f9f9;
}


// button{
//     background-color: #FF6203;
//     width: 100%;
//     border-radius: 38px;
//     font-size:28rpx;
//     text-align: center;
//     color: #FFFFFF;
//     height: 86rpx;
//     line-height: 86rpx;
//     /* padding-top: 13px;
//     padding-bottom: 13px; */
// }
// button[plain]{
//     border: none;
// }
textarea{
    min-height: 12px !important;
    line-height: 1.5 !important;
    color:#111111 !important;
}
.disabled-btn {
    border-color: #cccccc !important;
}
::v-deep .van-uploader__upload-text {
    text-align: center !important;
}
.btn-area{
    position: fixed;
    bottom: 0;
    width: calc(100% - 96rpx);
    padding-left: 48rpx;
    padding-right: 48rpx;
    background: #ffffff;
    z-index: 100;
    height: 144rpx;
    line-height: 144rpx;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    // flex-direction: column;
    border-top: 1px solid #f9f9f9;
}

::v-deep .custom-class, .van-button, .van-button--primary, .van-button--normal{
    width: 100% !important;
}
::v-deep .van-button--danger, .van-button--warning, .van-button--normal, .van-goods-action-button__inner {
    font-weight: normal !important;
    width: 100% !important;
}
::v-deep .van-button--primary {
    width: 100%;
    height: 86rpx;
    border-radius: 38rpx;
    font-size: 28rpx;
    background: #FF6203 !important;
    border: 1px solid #ff6203 !important;
}
</style>
